<template>
  <VPage edit>
    <div class="page-wrap" ref="pageWrapRef" v-loading="loading">
      <el-affix ref="affixRef" :offset="92" style="height: 40px; z-index: 999">
        <Tab :options="tabOptions" v-model="tabActive" />
      </el-affix>
      <div class="mt-[1px] flex-1 pb-[60px]" v-if="componentShow">
        <!-- <keep-alive> -->
        <component :is="currentComp" />
        <!-- </keep-alive> -->
      </div>

      <!-- <el-affix position="bottom" :offset="0" > -->
      <div class="flex justify-center items-center shadow-[0px_-3px_6px_0px_rgba(51,102,241,0.1)] py-[10px] affix-bottom bg-[var(--base-color)] z-[999]">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
      <!-- </el-affix> -->
    </div>
  </VPage>
</template>

<script setup lang="jsx">
// import Log from '@/components/Log/index.vue'
import Log from "./Log/index.vue"
import Tab from "./components/Tab/index.vue"
import Base from "./Base/index.vue"
import Logistics from "./Logistics/index.vue"
import Declare from "./Declare/index.vue"
import Fee from "./Fee/index.vue"
import ProductCost from "./ProductCost/index.vue"
import RefundRecord from "./RefundRecord/index.vue"
import ReturnRecord from "./ReturnRecord/index.vue"
import Receiving from "./Receiving/index.vue"
import InventoryDetail from "./InventoryDetail/index.vue"

import action from "@/utils/action.js"
const router = useRouter()
const tabActive = ref("1")
const affixRef = ref()

const loading = ref(false)

const orderSn = ref("")

const id = computed(() => router.currentRoute.value.query?.id)

const pageWrapRef = ref()
const scrollTop = ref(0)
const handleScroll = () => {
  scrollTop.value = pageWrapRef.value.scrollTop
}

onMounted(() => {
  handleGetDetail()
  pageWrapRef.value.addEventListener("scroll", handleScroll)
})
// onBeforeUnmount(() => {
//   pageWrapRef.value.removeEventListener("scroll", handleScroll)
// })
import keepAliveStore from "@/store/modules/keepalive"
const keepStore = keepAliveStore()
const routerName = router.currentRoute.value.name
watch(
  () => keepStore.currentKeepAliveList,
  (val) => {
    if (!val.includes(routerName)) {
      pageWrapRef.value.removeEventListener("scroll", handleScroll)
    }
  }
)
onActivated(() => {
  nextTick(() => {}).then(() => {
    if (formModel?.base?.id != id.value) {
      handleGetDetail()
    }
    pageWrapRef.value.scrollTop = scrollTop.value
    affixRef.value?.updateRoot()
  })
})

const componentShow = ref(true)
import api from "@/views/user/list/add/api/index"
const formModel = reactive({ base: {}, products: [], payment: {}, recipient: {}, remark: {}, logistics: {} })

const handleGetDetail = async () => {
  if (!id.value) return
  if (id.value == formModel?.base?.id) return
  try {
    if (formModel?.base?.id) {
      componentShow.value = false
      loading.value = true
    }
    const { data } = await api.orderDetail({ id: id.value })

    orderSn.value = data.order_sn
    const { recipient, payment, sender, items, logistics, ...base } = data
    formModel.base = {
      ...base,
      problem_cause: base.problem_cause.join(), // 异常信息
      settlement_status_desc: payment.settlement_status_desc, // 支付信息  结算状态
    }

    formModel.recipient = recipient
    formModel.payment = {
      ...payment,
      shipping_revenue: base?.shipping_revenue, // 运费收入
      discount_amount: base?.discount_amount, // 优惠金额
    }
    formModel.sender = sender
    formModel.remark = base
    formModel.products = items.map((n) => ({ ...n }))
    logistics.platform_carrier = logistics?.platform_carrier?.join(",")
    logistics.platform_tracking_number = logistics?.platform_tracking_number?.join(",")
    formModel.logistics = logistics || {}

    nextTick(() => {
      componentShow.value = true
      loading.value = false
    })
  } catch (e) {
    console.error(e)
  }
}

const tabOptions = ref([
  { label: "订单详情", value: "1", comp: <Base formModel={formModel} /> },
  { label: "日志", value: "2", comp: <Log tag="order" business_id={id.value} /> },
  { label: "物流轨迹", value: "3", comp: <Logistics logistics={{}} /> },
  { label: "申报信息", value: "4", comp: () => <Declare orderSn={formModel.base.order_sn} /> },
  { label: "订单费用", value: "5", comp: <Fee /> },
  { label: "订单产品费用", value: "6", comp: <ProductCost /> },
  { label: "退款记录", value: "7", comp: () => <RefundRecord orderSn={formModel.base.order_sn} /> },
  { label: "退换货记录", value: "8", comp: () => <ReturnRecord orderSn={formModel.base.order_sn} /> },
  { label: "客户售后记录", value: "9", comp: () => <Receiving orderSn={formModel.base.order_sn} /> },
  { label: "产品库存详情", value: "10", comp: () => <InventoryDetail detail={formModel} /> },
])

const currentComp = computed(() => {
  return tabOptions.value.find((n) => n.value === tabActive.value)?.comp
})

const handleClose = () => {
  action.setGlobalState({
    changeMicoTabsPath: {
      type: "closeActiveTab",
    },
  })
}
</script>

<style lang="scss" scoped>
.c-step {
  :deep(.el-step__line) {
    height: 8px;
    top: 8px;
  }
  :deep(.el-step__line-inner) {
    border-width: 4px !important;
  }
  :deep(.el-step__icon.is-icon) {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
  }
  :deep(.el-step.is-horizontal .el-step__line) {
    top: 8px;
  }
  :deep(.el-step__head.is-finish) {
    color: #3366f1;
    border-color: #3366f1;
  }
}
.steps-item {
  margin-top: 10px;
  &.current {
    // background-color: #e8edfd;
    color: #9da1ad;
    &:after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 5px 5px 5px;
      border-color: transparent transparent #e8edfd transparent;
      position: absolute;
      top: -5px;
    }
  }
}

.page-wrap {
  width: 100%;
  overflow-x: hidden;
  height: calc(100vh - 100px);
  padding-top: 0;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  // :deep(.vxe-header--column) {
  //   background-color: #fafafa !important;
  // }
}
.affix-bottom {
  position: fixed;
  bottom: 0;
  width: calc(100vw - 80px) !important;
}
</style>
